<template>
  <el-form ref="form" label-position="right" :model="currentRow" :rules="rules" label-suffix="："
           label-width="98px">

    <el-form-item label="崩塌类型" prop="collapseType">
      <el-radio-group v-model="currentRow.damage.collapse.collapseType">
        <el-radio v-for="item in EnumCollapseTypeList" :key="item.code" :label="item.code">{{item.name}}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="bengta-input">
      <el-row>
        <el-col :span="8">
          <el-form-item label="坡度" prop="angle">
            <el-input v-model="currentRow.damage.collapse.angle" placeholder="输入山坡的度数(°)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="坡高" prop="height">
            <el-input v-model="currentRow.damage.collapse.height" type="number" placeholder="输入山坡的高度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="危岩体积" prop="volume">
            <el-input v-model="currentRow.damage.collapse.volume" type="number" placeholder="输入危岩体积(m3)"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="geology-children">
      堆积体
    </div>
    <div class="bengta-input2">
      <el-row>
        <el-col :span="6">
          <el-form-item label="长度">
            <!--            //v-model 不支持多级嵌套对象，使用临时对象-->
            <el-input v-model="currentRow.damage.collapse.item.length"  type="number" placeholder="输入长度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="currentRow.damage.collapse.item.width" type="number" placeholder="输入宽度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高度" prop="height">
            <el-input v-model="currentRow.damage.collapse.item.height" type="number" placeholder="输入高度(m)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体积" prop="volume">
            <el-input v-model="currentRow.damage.collapse.item.volume" type="number" placeholder="输入体积(m3)"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>


  </el-form>
</template>
<script>
import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumCollapseTypeList: [],
      collapseType: [],
      // 单位信息表单 校验规则
      rules: {
        roadId: {required: true, message: '请选择路线'},
      },
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {

    // 内部表单校验
    _validatorForm() {
      this.collapse.item = this.collapse_item
      this.currentRow.damage.collapse = this.collapse
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumCollapseType'],
      ['EnumCollapseTypeList']);
  },
  created() {
  },
}
</script>

<style lang="less">
  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .bengta-input {
    .el-form-item__label {
      width: 90px !important;
    }

    .el-input {
      width: 90% !important;
    }
  }

  .bengta-input2 {
    padding: 20px;

    .el-form-item__label {
      width: 90px !important;
    }

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-top: 20px;
    margin-left: 20px;
  }
</style>
